<template>
  <q-td v-for="(item, index) in props.filter" :key="index">
      <q-input
        v-if="item.label!='Actions'&&
        item.name!='check_in'&&
        item.name!='check_out'&&
        item.name!='status'&&
        item.name!='sw_ver'&&
        item.name!='hw_ver'&&
        item.name!='card_installed'&&
        item.name!='type'&&
        item.name!='assigned'&&
        item.name!='expiry_date'&&
        item.name!='enable'&&
        item.name!='edoc_completion_rate'&&
        item.name!='sw_ver_completion_rate'&&
        item.name!='delivery_to'
        "
        borderless
        :label="item.label"
        dense
        filled
        v-model="myFilter.data[item.field]"
      >
        <template v-slot:default>
          <q-icon name="search" />
        </template>
      </q-input>

  </q-td>
  <!-- <q-btn
    label="clear"
    class="cap"
    size="sm"
    flat
    color="indigo-8"
    @click="clear"
  >
  </q-btn> -->
</template>

<script setup lang="ts">
import { reactive, ref, watch } from 'vue';

const props = defineProps<{
  filter: { label: string; field: string; search: boolean }[];
}>();

const emit = defineEmits(['update']);

const myFilter = reactive<{ data: { [key: string]: string } }>({ data: {} });

watch(() => {
  return { ...myFilter.data };
}, onUpdate);

function initFilter() {
  for (const v in props.filter) {
    const e = props.filter[v];
    myFilter.data[e.field] = '';
  }
}

initFilter();

function onUpdate() {
  emit('update', { ...myFilter.data });
}

function clear() {
  initFilter();
}

function filterFn(row: any) {
  for (const k in myFilter.data) {
    const v = myFilter.data[k].toLowerCase();
    if (v.toString() == '') continue;
    if (!row[k]?.toString().toLowerCase().includes(v)) return false;
  }
  return true;
}

defineExpose({
  filterFn,
});
</script>
